new(component): StatusPage #31
Conversation
Co-authored-by: Kelly Joseph Price <[email protected]>
| if (url) { | ||
| const fetchStatus = async () => { | ||
| try { | ||
| const res = await fetch(`${url.replace(/\/$/, '')}/api/v2/status.json`); |
There was a problem hiding this comment.
I was traveling on Friday so I didn't get a chance to ask then, but is this meant to only show ReadMe statuses?
If this is meant to be dynamic for the customer I have a couple of questions:
- Are we requiring the customer to have an endpoint that ends in
/api/v2/status.json? It seems strange that we would force them into a specific endpoint form instead of just taking the url and using it. If we aren't forcing them to have an endpoint ending in/api/v2/status.jsonthen I don't think this will work. It will fail because we are modifying the url by appending/api/v2/status.jsonto the end of it.
E.g. if I have a status endpoint http://www.mycompany.com/service1/status, this component will modify it and make it http://www.mycompany.com/service1/status_/api/v2/status.json_.
There was a problem hiding this comment.
This component should only work for sites that use Atlassian's Status Page service. It seems like a lot of companies do, including ReadMe. So adding /api/v2/status.json to the URL should work in these cases, for example https://www.readmestatus.com/api/v2/status.json, https://www.githubstatus.com/api/v2/status.json, and https://atlas-status.mit.edu/api/v2/status.json. Let me know if you want me to be more specific in the Overview section of the README!
There was a problem hiding this comment.
nope that answers my question and the one below.
I would mention that in the readme.md page and also that the url shouldn't end in /api/v2/status.json. The component assumes the passed in url doesn't end in /api/v2/status.json but a customer might put the full url, eg. https://www.myservice.com/api/v2/status.json which the component will change to https://www.myservice.com/api/v2/status.json/api/v2/status.json. The component should only add the suffix if it isn't present or we should make the documentation clear that the passed in url should not end in /api/v2/status.json.
There was a problem hiding this comment.
gotcha, I'll update the documentation! ideally the user should set the url as their actual status page site and not the .json version. the open link in new tab icon button takes in the url
| try { | ||
| const res = await fetch(`${url.replace(/\/$/, '')}/api/v2/status.json`); | ||
| if (!res.ok) throw new Error(`Failed to fetch status: ${res.status}`); | ||
| const data = await res.json(); |
There was a problem hiding this comment.
I haven't seen anywhere that describes what the response form needs to be. It might be good if the readme.md showed what the endpoint's return shape is so it's clear to anyone using this.
There was a problem hiding this comment.
The response from a Statuspage endpoint should include status, indicator, and description
{"page":{"id":"nz3r09cr7dk1","name":"ReadMe","url":"https://www.readmestatus.com","time_zone":"America/Los_Angeles","updated_at":"2025-08-25T07:16:06.459-07:00"},"status":{"indicator":"none","description":"All Systems Operational"}}
StatusPage
Overview
A
<StatusPage />can be used to embed the current operational status, health, or uptime of a service or system. It fetches live status information from a public Statuspage endpoint (e.g. https://www.githubstatus.com) and displays the status indicator and description.Usage
Props
titleurl